<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>测试前端框架</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/adminlte.min.js"></script>


    <link rel="stylesheet" type="text/css" href="/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="/dist/css/skins/skin-blue.min.css">

    <script type="text/Javascript" src="/xheditor/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/xheditor/xheditor-1.1.14-zh-cn.min.js"></script>
    <script type="text/javascript">
        $(pageInit);

        function pageInit() {
            $.extend(xheditor.settings, {shortcuts: {'ctrl+enter': submitForm}});
            $('#articleInner').xheditor({
                tools: 'simple', skin: 'default', internalScript: false,
                html5Upload: false, upImgUrl: "/admin/uploadImg", upImgExt: "jpg,jpeg,gif,png"
            });
        }

        function submitForm() {
            submitit();
        }
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header th:include="admin_public :: header" class="main-header">
    </header>


    <!-- Left side column. contains the logo and sidebar -->
    <aside th:include="admin_public :: sidebar" class="main-sidebar">
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <section class="content container-fluid">

            <div>
                <!-- Horizontal Form -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">文章管理-添加文章</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <div class="form-horizontal">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="ArticleTitle" class="col-sm-2 control-label">文章名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="articleTitle"
                                           placeholder="ArticleTitle">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ArticleAuthor" class="col-sm-2 control-label">作者</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="articleAuthor"
                                           placeholder="ArticleAuthor">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ArticleType" class="col-sm-2 control-label">文章类型</label>
                                <div class="col-sm-10">
                                    <!--<input type="text" class="form-control" id="articleType" placeholder="ArticleType">-->
                                    <select id = "articleType" class="form-control"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ArticlePicture" class="col-sm-2 control-label">图片</label>
                                <div class="col-sm-10" onclick ='document.getElementById("articlePicture").click();'>
                                    <div class="form-control" id="pic" style="color: #8e8e8e;">ArticlePicture</div>
                                </div>
                            </div>

                            <input type="file" class="form-control" id="articlePicture" onchange="updateFile3()"
                                   name="articlePicture" style="display:none">

                            <div class="form-group">
                                <label for="ArticleAbstract" class="col-sm-2 control-label">文章摘要</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="articleAbstract"
                                           placeholder="ArticleAbstract">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ArticleInner" class="col-sm-2 control-label">文章内容</label>
                                <div class="col-sm-10">
                                    <!--<input type="text" class="form-control" id="articleInner"-->
                                    <!--placeholder="ArticleInner">-->
                                    <textarea id="articleInner" name="essaycontent" rows="40" cols="80"
                                              style="width: 100%"></textarea>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-success btn-flat" onclick="addArticle()">新增</button>
                        </div>
                        <!-- /.box-footer -->
                    </div>
                </div>
                <!-- /.box -->
            </div>

        </section>

    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer th:include="admin_public :: footer" class="main-footer">
    </footer>

    <!-- Control Sidebar -->
    <aside th:include="admin_public :: control" class="control-sidebar control-sidebar-dark">
    </aside>

    <div class="control-sidebar-bg">
    </div>

    <script src="/ajaxfileupload.js"></script>

    <script>

        $.ajax({
            url : '/admin/label/getLabels',
            type : 'get',
            success : function (result) {
                var labelHtml = '';
                for(var i=0;i<result.length;i++){
                    labelHtml += '<option value="' + result[i].labelName + '">' + result[i].labelName + '</option>';
                }
                $("#articleType").html(labelHtml);
            },
            error : function (result) {
                alert('查询失败');
            }

        });

        function updateFile() {
            var filePath = $("#articlePicture").val();
            if (filePath.indexOf("bmp") != -1
                || filePath.indexOf("gif") != -1
                || filePath.indexOf("jpg") != -1
                || filePath.indexOf("jpe") != -1
                || filePath.indexOf("png") != -1
            ) {
                //console.log("符合图片格式")
            } else {
                alert("您未上传文件，或者您上传文件类型有误!");
                return false;
            }
            $.ajaxFileUpload({
                url: "/admin/uploadImg",
                type : "POST",
                fileElementId : 'articlePicture',
                dataType : 'text',
                success: function (result) {
                    console.log(result);
                    var arr = result.msg.split("\"");
                    var loc = arr[arr.length - 2];
                    //$("#articlePicture").attr('type', 'text');
                    $("#pic").html(loc);
                },
                error: function (result,e) {
                    console.log(result);
                    alert(result);
                    /*alert(e);
                    alert("上传失败");*/
                }
            });
        }

        function updateFile2() {
            var formData=new FormData();
            formData.append('file',$('#ArticlePicture').get(0).files[0]);
            $.ajax({
                url: "/admin/uploadImg",
                type: 'POST',
                cache: false, //上传文件不需要缓存
                data: formData,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (result) {
                    console.log(result);
                    var arr = result.msg.split("\"");
                    var loc = arr[arr.length - 2];
                    //$("#articlePicture").attr('type', 'text');
                    $("#pic").html(loc);
                },
                error: function (result) {
                    console.log(result);
                    alert(result);
                }
            });
        }

        function updateFile3() {
            var form = new FormData();
            form.append('file',$('#articlePicture').get(0).files[0]);
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/admin/uploadImg", true);
            xhr.onload = function () {
                $("#pic").html(xhr.responseText);
            };
            xhr.send(form);
        }

        function addArticle() {

            var article = {
                articleTitle: $("#articleTitle").val(),
                articleAuthor: $("#articleAuthor").val(),
                articleType: $("#articleType").val(),
                articlePicture: $("#pic").html(),
                articleAbstract: $("#articleAbstract").val(),
                articleInner: $("#articleInner").val()
            };
            $.ajax({
                type: 'post',
                url: "/admin/article/addArticle",
                //headers: {'Content-type': 'application/json;charset=UTF-8'},
                contentType: 'application/json;charset=UTF-8',
                dataType: "json",
                data: JSON.stringify(article),
                success: function (result) {
                    alert("添加成功");
                    window.location.href = "/admin/article/selectArticle"
                },
                error: function (result) {
                    alert("失败了");
                }
            })
        }

    </script>
</div>
</body>
</html>